<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container last_container use-table">
			<div class="dflex_vertical_c margin_b_20 table-head">
				<div class="dflex_vertical_c">
					<div class="search_name">操作人：</div>
					<el-input v-model="req.create_uname" placeholder="请输入" class="search_input" @change="search" clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_l_10">
					<div class="search_name">提现时间：</div>
					<el-date-picker
						v-model="searchTime"
						type="daterange"
						align="right"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="yyyy-MM-dd"
						:picker-options="pickerTimeOptions"
						class="search_start_end_time"
						@change="search"
					></el-date-picker>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_l_10" @click="search">搜索</el-button>
			</div>
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row @sort-change="sortable">
				<el-table-column property="create_uname" label="操作人" align="center"></el-table-column>
				<el-table-column label="提现金额" align="center">
					<template slot-scope="scope">
						<div class="price">{{ scope.row.fxs_cashout_amount / 100 }}</div>
					</template>
				</el-table-column>
				<el-table-column property="fxs_cashout_way" label="提现平台" align="center"></el-table-column>
				<el-table-column property="state" label="状态" align="center"></el-table-column>
				<el-table-column property="create_time" sortable="custom" label="提现时间" align="center"></el-table-column>
				<div slot="empty"><el-empty description=" "></el-empty></div>
			</el-table>
			<el-pagination
				background
				:current-page="req.page"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal"
				@size-change="sizeChange"
				@current-change="currentChange"
			></el-pagination>
		</div>
	</div>
</template>

<script>
const __name = 'wmzmall-distributor-cashout';
export default {
	data() {
		return {
			dataId: '',
			searchTime: [],
			req: {
				page: 1,
				rows: 10,
				orderby: 'create_time asc',
				create_uname: '',
				begin_time: '',
				end_time: ''
			},
			tblHeight: 0,
			tableLoading: false,
			tableDatas: [],
			tableTotal: 0,
			pickerTimeOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			},
			searchBtnLoading: false
		};
	},
	methods: {
		async loadData(callback) {
			this.tableLoading = true;

			this.req.begin_time = '';
			this.req.end_time = '';

			if (this.searchTime && this.searchTime.length > 0) {
				this.req.begin_time = this.searchTime[0].getTime();
				this.req.end_time = this.searchTime[1].getTime() + (60 * 60 * 24 - 1) * 1000;
			}
			
			await this.$db[__name]
				.where({ fxs_uid: this.dataId })
				.whereif(this.req.create_uname, { create_uname: new RegExp(this.$api.filterRegexpKey(this.req.create_uname), 'i') })
				.whereif(this.searchTime && this.searchTime.length > 0, { create_time: this.$db.$cmd.gte(this.req.begin_time).and(this.$db.$cmd.lte(this.req.end_time)) })
				.totable(this.req)
				.then(res => {
					if (res.code == 200) {
						res.datas.rows.forEach((row, idx) => {
							row.create_time = new Date(row.create_time).format();
						});
						this.tableDatas = res.datas.rows;
						this.tableTotal = res.datas.total;
						
						if (typeof callback === 'function') {
							callback();
						}
					}
					this.tableLoading = false;
					this.searchBtnLoading = false;
				});
		},
		search() {
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path + '-withdrawDeposit');
			this.searchBtnLoading = true;
		
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		
			uni.setStorage({
				key: '__search' + this.$route.path + '-withdrawDeposit',
				data: this.req
			});
		},
		sortable(column) {
			if (column.order) {
				column.order = column.order.replace('ending', '');
			}
			
			this.req.orderby = column.prop + ' ' + (column.order || 'desc');
			
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		sizeChange(size) {
			this.$api.storagePaginationRows(size, this.$route.path + '-withdrawDeposit');
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path + '-withdrawDeposit');
			this.req.rows = size;
		
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		currentChange(current) {
			this.$api.storagePaginationPage(current, this.$route.path + '-withdrawDeposit');
			this.req.page = current;
		
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		}
	},
	created() {
		let __search = uni.getStorageSync('__search' + this.$route.path + '-withdrawDeposit');
		if (__search) {
			this.req = __search;
			if (this.req.begin_time && this.req.end_time) {
				this.searchTime.push(new Date(this.req.begin_time), new Date(this.req.end_time));
			}
		}
		
		this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path + '-withdrawDeposit') || 1;
		this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path + '-withdrawDeposit') || 10;
		
		this.dataId = this.$route.query.id || '';
		
		this.loadData(() => {
			this.$nextTick(() => {
				this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path + '-withdrawDeposit');
			});
		});
	},
	mounted() {
		this.$nextTick(() => {
			this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path + '-withdrawDeposit');
		});
	},
	updated() {
		if (!this.tblHeight) {
			this.tblHeight = this.$refs.tbl.tblHeight;
		}
	}
};
</script>

<style></style>
